{include file="common/header"}
{include file="lottery/prize"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
        <el-form ref="ruleForm" :model="config" :rules="rules" label-width="150px">
            <el-form-item label="活动名称：" prop="title">
                <el-input v-model="config.title"></el-input>
                <a :href="index_url('lottery/lottery/index')" target="_blank">点击预览抽奖H5界面</a>
            </el-form-item>
            <el-form-item label="活动时间：" prop="time">
                <el-date-picker
                    v-model="config.time"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="抽奖消耗积分：" prop="number">
                <el-input-number v-model="config.number" controls-position="right" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="活动背景图：" prop="background">
                <el-file-select v-model="config.background"></el-file-select>
            </el-form-item>
            <el-form-item label="活动状态：">
                <el-radio v-model="config.status" :label="0">关闭</el-radio>
                <el-radio v-model="config.status" :label="1">开启</el-radio>
            </el-form-item>
            <el-form-item label="奖品选择：" prop="prize">
                <el-prize v-model="config.prize"></el-prize>
            </el-form-item>
            <el-form-item label="活动规则：" prop="rule">
                <el-editor v-model="config.rule"></el-editor>
            </el-form-item>
        </el-form>
        <div class="el-bottom" style="width: 100%">
            <el-button 
                :loading="loading"
                type="primary" 
                size="medium" 
                icon="el-icon-refresh-right"
                @click="save()">
                保 存
            </el-button>
        </div>
    </div>
</div>
<script>
var catalog = {:json_encode($catalog)};
new Vue({
    el: '#app',
    data() {
        return {
            config: {:json_encode($config)},
            loading: false,
            updateUrl: "lottery/lottery/config",
            rules: {
                title: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                time: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                number: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                prize: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                background: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                rule: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        /**
         * 保存数据
         */
        save() {
        	let self = this;
            self.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    self.loading = true;
                    request.post(self.updateUrl, {config: self.config}, function(res){
                        self.loading = false;
                        self.$notify({showClose: true, message: res.message, type: res.status});
                    });
                } else {
                    return false;
                }
            });
        },
    },
})
</script>
{include file="common/footer"}